{extend name="base"}
{block name="style"}
<link rel="stylesheet" href="{:_static()}/css/common.css" media="all" />
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=7U2BZ-WT3C6-3SFSH-EPX5Z-OW3YT-C6F7A"></script>
<script type="text/javascript" src="{:_static()}/components/qqMap.js"></script>

{/block}
{block name="main"}
<style type="text/css">
	.el-icon-minus,.el-icon-plus{line-height: inherit !important;}
	.custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: 8px;
	}
	.el-tree-node__content{min-height: 20px; height: auto; padding: 6px 0;}
	/*.el-tree-node__children{height: 3px; padding: 6px 0;}*/
</style>
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<!-- <el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">删除</el-button> -->
			<el-button type="primary" size="small" @click="addDialog=true">复制素材</el-button>
			<!-- <el-button type="primary" size="small" @click="addDialog=true">添加素材</el-button> -->
			<!-- <el-button type="primary" size="small" @click="addDialog=true">添加素材</el-button> -->
		</el-col>
	</el-row>


    <el-tree :data="tableData" node-key="id" ref="tree" show-checkbox="" default-expand-all show-checkbox>
	    <span class="custom-tree-node" slot-scope="{ node, data }">
	        <span>{{ data.id }}</span>
	        <span>{{ data.label }}</span>
	        <span>{{ data.remark }}</span>
	        <!-- <img class="banner" src="https://dn-etcp.qbox.me/app/59390b186d0dc.jpg" alt="" width="50"> -->
	        <!-- <span v-if="data.level == 'sucai'">
	          	<el-button type="text" size="mini" @click="() => edit(data)">
	            	编辑
	          	</el-button>
	          	<el-button type="text" size="mini" @click="() => append(data)">
	            	添加
	          	</el-button>
	          	<el-button type="text" size="mini" @click="() => remove(node, data)">
	            	删除
	          	</el-button>
	        </span>
	        <span v-else-if="data.level == 'cate'">
	          	<el-button type="text" size="mini" @click="() => edit(data)">
	            	编辑
	          	</el-button>
	          	<el-button type="text" size="mini" @click="() => append(data)">
	            	添加
	          	</el-button>
	          	<el-button type="text" size="mini" @click="() => remove(node, data)">
	            	删除
	          	</el-button>
	        </span>
	        <span v-else></span> -->
	    </span>
    </el-tree>


	<!-- 添加、编辑素材 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="addDialog">
		<el-form ref="forms" :model="tableData" :rules="rules" label-width="80px">
			<el-form-item label="复制到用户" prop="uname">
			<template>
				<el-select v-model="uid" placeholder="请选择用户" prop="uname">
				    <el-option
					      v-for="item in tableData"
					      :key="item.id"
					      :label="item.label"
					      :value="item.id">
				    </el-option>
				</el-select>
			</template>
			</el-form-item>

		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="addDialog = false">取 消</el-button>
	    	<!-- <el-button type="primary" @click="onSubmit('forms','{:url(\'copycate\')}',submitData)">提 交</el-button> -->
	    	<el-button type="primary" @click="submitcopy()">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加、编辑素材 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list|json_encode|raw}, // 列表数据
		checkData:[], // 选中数据
		params:{$params|json_encode|raw},
		imagesPrefix:"{:images('')}", //媒体文件路径前缀
		cate:[], //所有素材分组
		// cate_id:{$params.cate_id|default=0}, //当前筛选的分组ID
		currentCateOptions:{}, //当前筛选的属性
		dialogTitle:'添加素材',
		uid:'',
		cate_id:'',
		addDialog:false,
		data:{}, 
		rules:{
			uname:{require:true,message:'请选择用户'}
		},
		options:[], //添加属性

		fileList:[], //上传的图片ID
		wsImagesHtml:'',  //上传显示的图片
		mediaType:{
			image:"{:lang('image')}",
			video:"{:lang('video')}",
			audio:"{:lang('audio')}",
		},

		// 腾讯地图组件数据
		qqMap:false, //是否显示地图选择框
	},
	created(){
		// this.emptyData();
		// this.filterCate();
	},
	computed:{
		// 添加素材 提交数据
		submitcopy(){
			// let tableData={};
			// this.tableData.forEach(item=>{
			// 	if(item.value>0&&item.name!=='media'){
			// 		tableData[item.name]=item.default;
			// 	}
			// })
			console.log(this.$refs.tree.getCheckedNodes());
			// console.log(this.tableData)
			// return this.$refs.tree.getCheckedNodes();
			if (this.$refs.tree.getCheckedNodes() == '') {
				alert('未选择素材');
				return false;
			}

			// 获取用户选择的用户信息
			// 为空时返回提示信息
			if (this.uid == '') {
				alert('未选用户');
				return false;
			}
			this._wspost("{:url('getcate')}",{uid:uid},res=>{
	    		// console.log(res[0]['options']);
				this.cate=res;
				// this.cate_id = 12;
			});
			return {data:JSON.stringify(this.$refs.tree.getCheckedNodes())}
		},
	},
	methods:{
		// 全选
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
		emptyData(newData={}){
			this.data=Object.assign({
				title:'',
				// cate_id:'',
				remark:'',
				status:1,
			},this.clone(newData));
		},
		// 腾讯地图组件 确定选择 地址事件
		checkQQMapAddress(data){
			this.options.forEach(item=>{
				if(item.name==='map'){
					item.default={
						address:data.address,
						lat:data.latLng.lat,
						lng:data.latLng.lng,
					}
				}
			})
		},
		// 添加素材 提交数据
		submitcopy(){
			console.log(this.$refs.tree.getCheckedNodes());
			// console.log(this.tableData)
			// return this.$refs.tree.getCheckedNodes();
			var postData = this.$refs.tree.getCheckedNodes()
			if (postData == '') {
				alert('未选择素材');
				return false;
			}

			// 获取用户选择的用户信息
			// 为空时返回提示信息
			if (this.uid == '') {
				alert('未选用户');
				return false;
			}

			// 显示loading
	        const loading = this.$loading({
	          	lock: true,
	          	text: '正在复制',
	          	spinner: 'el-icon-loading',
	          	background: 'rgba(0, 0, 0, 0.7)'
	        });

			// 获取素材id和素材分类id
			var sucai = [];
			var ii = 0;
			for ( var i = 0; i <postData.length; i++){
			    // console.log(postData[i]);
			    if (postData[i]['level']  == 'cate' || postData[i]['level']  == 'sucai') {
			    	// 
			    	// sucai[ii]['id'] = postData[i]['id']; 
			    	// sucai[ii]['level'] = postData[i]['level']; 
			    	if (postData[i]['cate_id']) {
			    		sucai[ii] = {id:postData[i]['id'],cate_id:postData[i]['cate_id'],level:postData[i]['level']}; 
			    	}
			    	else{
			    		sucai[ii] = {id:postData[i]['id'],level:postData[i]['level']}; 
			    	}
			    	ii++;
			    }
			}
			console.log(sucai);
			this._wspost("{:url('copycate')}",{uid:this.uid,data:sucai},res=>{
	    		console.log(res);
				// this.cate=res;
				// this.cate_id = 12;
	          	loading.close();
			});
			// return {data:JSON.stringify(this.$refs.tree.getCheckedNodes())}
		},
		// 上传媒体文件
		onUploads(e,type){
			let file=e.target.files[0],
				mediaType=this.mediaType;
			if(file.type.indexOf(type)===-1){
				this.$message({
					message:'该分组仅允许上传'+mediaType[type]+'文件',
					type:'warning',
				});
				return;
			}
        	let formData=new FormData();
        	formData.append('file',file);
        	this.jqUpload("{:url('loads')}",formData,res=>{
        		if(res.status===0){
        			data=res.data;
                    // 删除按钮
                    this.wsImagesHtml+=this._pushImages(data.src,data.type,'',data.id);
        		}
        	})
		},
		// 清空删除上传的媒体文件
		clearFiles(){
			this.wsImagesHtml='';
			this._wspost("{:url('delImages')}",{id:this.fileList},res=>{
				if(res.code){
					this.fileList=[];
				}
			},false);

		},
		edit(row){
			this.emptyData(row);
			// console.log(row)
			if (row.level == 'sucai') {
				this.uid = row.uid;
				this.ucate(this.uid);
				this.cate_id = row.cate_id;
			}
			// this.selectCate(row.cate_id,row);
			this.addDialog=true;
			this.dialogTitle='素材编辑';
		},
		_pushImages(src,type,wsImagesHtml='',id){
			if(type===1){ //图片
				wsImagesHtml+=`<li><img src="${src}" /></li>`;
			}else if(type===2){ //视频
				wsImagesHtml+=`<li><video src="${src}"></video></li>`;
			}else if(type===3){ //音频
				wsImagesHtml+=`<li><img src="{:_static()}/images/audio.png" /></li>`;
			}
			if(id){
				this.fileList.push(id);
			}
			return wsImagesHtml;
		}
	},
});
</script>
{/block}